<template>
	<view>
		<!-- <view class="searchBox pL15 pR15 ">
			<u-search placeholder="搜索" v-model="query.oddJobName" height="80" :show-action="false"
				bg-color="#F7F8FB" shape="square" @change='search'>
			</u-search>
		</view> -->
		<mescroll-uni class="lisBox" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption" :bottombar="false" :top="20">
			<view class="pB15 mL15 mR15">
				<view class="jobCard" v-for="(item,i) in list" :key="item.id" @click="jumpJobDetail(item)">
					<view class="flex  alg-center jst-between">
						<view class="w75 flex alg-center">
							<text class="jobTitle" :class="xf.getItemClass(item)">{{item.oddJobName}}</text>
							<u-tag v-if="item.izUrgent==1" :text="item.izUrgentText" bg-color="#fff" class="jpTag" :color="'#FF0000'" :border-color="'#FF0000'"
								 />
							<u-tag v-if="item.recruitmentCarefree&&item.recruitmentCarefree.indexOf('10')>=0" text="用工无忧" bg-color="#EAF4FE" class="zgTag" :color="'#3291F8'" :border-color="'#EAF4FE'"
								 />	
							
							
						</view>
						<view class="jobMoney txt-ellipsis  font20 u-red">{{item.salary}}<text
								class="jobUint font13">元</text></view>
					</view>
					<view class="flex alg-center flex-wrap">
						<view class="jobTime">{{item.jobBeginDatetime}}-{{item.jobEndDatetime}}</view>
						<view class="jobTime">{{item.salaryPaymentText}}</view>
						<view class="jobTime">招{{item.oddJobUseNum||0}}人</view>
					</view>
					<view class="flex alg-center jst-between mT10">
						<view class="jobPos flex alg-center w70">
							<image class="posImg" :src="resources.posIcon" mode=""></image>
							<text class="posTxt mL5 txt-ellipsis">{{item.hopeWorkAddress}}</text>
						</view>
						<view class="font13 u-6">{{item.distance}}</view>
					</view>
					<view class="flex jst-between alg-center mT10">
						<view class="flex alg-center w64 txt-ellipsis">
							<u-image :width="48" :height="48" v-if="item?.comOrUserProfile"
								:src="xf.getImgUrl(item?.comOrUserProfile)" mode=""></u-image>
							<image v-else class="companyImg" :src="resources.defaultHeader" mode=""></image>
							<text class="companyName txt-ellipsis">{{item.comOrUserName}}</text>
							<image v-if="item.oddReleaseType==1" class="rzImg" :src="resources.qyrzLogo" mode="">
							</image>
							<image v-else class="rzImg" :src="resources.grrzLogo" mode=""></image>
						</view>
						<view class="flex alg-center">
							<view class="canselFavorBtn font14" @click.stop="cancelFavorOpt(item)">取消收藏</view>
							<!-- <view class="bmBtn">立即报名</view> -->
						</view>

					</view>
				</view>

			</view>
		</mescroll-uni>
		<xfTipModal ref="tipModal"></xfTipModal>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		myFavorLis,
		cancelFavor
	} from '@/api/userInterface/user.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				downOption: {
					use: true,
					auto: false
				},
				query: {
					pageSize: 10,
					pageNo: 1,
					collectState: 0
				},
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					empty: {
						use: true,
						icon: '/static/image/nodata.png',
						tip: "暂无数据",
						fixed: true
					},
					textNoMore: "到底啦~",
				},
				list: [],
				curretnTab: 0,
				tabLis: [{
						name: "全部",
						value: ""
					},
					{
						name: "已报名",
						value: 1
					},
					{
						name: "已拒绝",
						value: 4
					},
				],


			};
		},
		onShow(e) {
			this.mescroll&&this.mescroll.triggerDownScroll()
		},
		methods: {
			//取消收藏
			cancelFavorOpt(v) {
				let that = this;
				this.$refs.tipModal.open({
					content: "确认取消收藏该职位吗？",
					btnText: "取消收藏",
					showCancel: true,
					success: function() {
						cancelFavor({
							xfOddjobInfoId: v.xfOddjobInfoId
							// collectState: "1",
							// collectType: v.collectType
						}).then(res => {
							if (res.success == true) {
								uni.showToast({
									title: "取消收藏成功",
									icon: 'none',
									duration: 2000

								})
								that.list = [];
								that.mescroll.resetUpScroll();
							}

						}).catch(err => {

						})
					}
				})
				// cancelFavor({
				// 	xfOddjobInfoId:v.xfOddjobInfoId,
				// 	collectState:1,
				// 	collectType: v.collectType
				// }).then(res => {
				// 	this.list = [];
				// 	this.mescroll.resetUpScroll();
				// })
			},
			changeTab(v, i) {
				this.curretnTab = i;
			},
			jumpJobDetail(item) {
				uni.navigateTo({
					url: `/pages/userPage/subpackge/oddJob/jobDetail/jobDetail?id=${item.xfOddjobInfoId}`,
				})

			},
			search() {
				this.list = [];
				this.mescroll.resetUpScroll();
			},


			changeValue(v) {
				this.query[v.type] = v.value;
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			async upCallback(page) {
				if (page.num == 1) this.list = [];
				this.query.pageNo = page.num;
				myFavorLis(this.query).then(res => {
					let list = res.result?.records || [];
					this.list = this.list.concat(list);
					this.mescroll.endSuccess(this.list.length);
				}).catch(err => {
					this.mescroll.endByPage(0, 0);
					this.mescroll.endSuccess(1);
					this.mescroll.endErr();
				})
			},
		}
	};
</script>
<style lang="scss">
	page {
		height: 100%;
		/* #ifdef MP-WEIXIN */
		height: 100%;
		/* #endif */
		background: linear-gradient(0deg, #F7F8FB, #E1EEFF);
	}
</style>
<style scoped lang="scss">
	.jobCard {
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.jobName {
			// max-width:200rpx;
		}

		.jobLeft {
			width: 70%;
		}

		.canselFavorBtn {
			padding: 0 30rpx;
			height: 66rpx;
			line-height: 66rpx;
			text-align: center;
			margin-right: 20rpx;
			border-radius: 16rpx;
			border: 2rpx solid #F3F3F3;
		}

		.jobStatus {
			border: 2rpx solid #FF0000;
			border-radius: 10rpx;
			height: 34rpx;
			line-height: 34rpx;
			padding: 0 10rpx;
			margin-right: 10rpx;
		}

		.jobTag {
			height: 34rpx;
			line-height: 34rpx;
			padding: 0 10rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
		}

		.jobMoney {
			word-break: keep-all;
		}

		.jobTime {
			color: #8D8D8D;
			font-size: 26rpx;
			margin-right: 10rpx;
			height: 44rpx;
			line-height: 44rpx;
			padding: 0 20rpx;
			background: #F8F8F8;
			border-radius: 6rpx;
			margin-top: 16rpx;
		}

		.posImg {
			width: 32rpx;
			height: 32rpx;
		}

		.posTxt {
			width: calc(100% - 42rpx);
			font-weight: 400;
			font-size: 26rpx;
			color: #8D8D8D;
		}

		.companyImg {
			width: 48rpx;
			height: 48rpx;
		}

		.rzImg {
			width: 24rpx;
			height: 24rpx;
		}

		.companyName {
			font-weight: 500;
			font-size: 30rpx;
			color: #333;
			margin-right: 10rpx;
			margin-left: 10rpx;
		}
	}
</style>